<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录 - 乐购</title>
    <link rel="icon" href="images/common/favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="styles/reset.css" type="text/css">
    <link rel="stylesheet" href="layui/css/layui.css" type="text/css">
    <link rel="stylesheet" href="styles/common.css" type="text/css">
    <link rel="stylesheet" href="styles/login.css" type="text/css">
</head>
<body>
<!-- 页头 -->
<header class="logHead">
    <div class="container">
        <!-- logo -->
        <a href="index.html">
            <img src="images/index/logo.png" alt="logo">
        </a>
        <!-- 咨询电话 -->
        <div class="contact right fz16">
            <img src="images/index/contact.jpg" alt="电话">
            <p>咨询电话<br/>0828 - 1010110</p>
        </div>
    </div>
</header>
<!-- 主体 -->
<main>
    <div class="container" style="position:relative;">
        <!-- 登录框 -->
        <div class="sign">
            <!-- 登录框 01 -->
            <div class="sign-first">
                <!-- 登录框顶部 -->
                <div class="choose fz16">
                    <button id="btn1" class="show">账号密码登录</button>
                    <button id="btn2">手机扫码登录</button>
                    <img src="images/login/sign_first.png" alt="" id="tog">
                </div>
                <!-- 登录框表单 -->
                <form action="login.php" method="post">
                    <label>
                        <input type="text" placeholder="用户名 / 邮箱 / 手机号" id="username" autofocus name="username">
                        <i class="layui-icon layui-icon-username"></i>
                    </label>
                    <label>
                        <input type="password" placeholder="密码" id="pwd" name="pwd">
                        <i class="layui-icon layui-icon-password"></i>
                    </label>
                    <input type="submit" value="登录" id="sub" name='sub'>
                    <div class="tips">
                        <a href="">忘记密码</a>
                        <a href="register.html">注册账号</a>
                    </div>
                </form>
                <!-- 登录框底部 -->
                <div class="third">
                    <i>第三方登录:&nbsp;</i>
                    <a href="#" class="layui-icon layui-icon-login-qq"></a>
                    <a href="#" class="layui-icon layui-icon-login-wechat" style="color: #59BD49"></a>
                    <a href="#" class="layui-icon layui-icon-login-weibo" style="color: #D61E04"></a>
                    <img src="images/login/alipay.png" alt="">
                    <i> >></i>
                </div>
            </div>
            <!-- 登录框 02 -->
            <div class="sign-second fz18" style="display: none">
                <div class="choose">
                    <img src="images/login/sign_second.png" alt="" id="com">
                </div>
                <div class="signCon">
                    <div class="open lh24">
                        <img src="images/login/saoIcon.jpg" alt="">
                        <p>打开手机乐购<br/>扫一扫登录</p>
                    </div>
                    <img src="images/login/qrcode.jpg" alt="">
                    <span>点击下载乐购APP</span>
                </div>
            </div>
        </div>
    </div>
</main>
<!-- 页脚 -->
<footer>
    <!-- 站点地图 -->
    <div class="container">
        <ul class="siteSer fz18 lh24">
            <li>
                <img src="images/index/site_01.jpg" alt="">
                <strong>正品保障<br/><span>正品行货 放心选购</span></strong>
            </li>
            <li>
                <img src="images/index/site_02.jpg" alt="">
                <strong>满86包邮<br/><span>满86元 免运费</span></strong>
            </li>
            <li>
                <img src="images/index/site_03.jpg" alt="">
                <strong>售后无忧<br/><span>7天无理由退货</span></strong>
            </li>
            <li>
                <img src="images/index/site_04.jpg" alt="">
                <strong>准时送达<br/><span>收货时间由你做主</span></strong>
            </li>
        </ul>
        <ul class="siteMap clearfix">
            <li>
                <a href="">新手入门</a>
                <a href="">购物流程</a>
                <a href="">会员制度</a>
                <a href="">订单查询</a>
                <a href="">服务协议及隐私说明</a>
                <a href="">网站地图</a>
            </li>
            <li>
                <a href="">支付方式</a>
                <a href="">货到付款</a>
                <a href="">网上支付</a>
                <a href="">礼品卡支付</a>
                <a href="">其它支付</a>
            </li>
            <li>
                <a href="">配送服务</a>
                <a href="">配送进度查询</a>
                <a href="">商品验货与签收</a>
            </li>
            <li>
                <a href="">相关规则</a>
                <a href="">平台规则</a>
                <a href="">退换货政策</a>
                <a href="">发票制度</a>
                <a href="">帮助中心</a>
            </li>
            <li>
                <span>App更优惠</span>
                <img src="images/index/qrCode_01.jpg" alt="">
            </li>
            <li>
                <span>加微信查订单</span>
                <img src="images/index/qrCode_02.jpg" alt="">
            </li>
        </ul>
    </div>
    <!-- 底部 -->
    <div class="record fz12 lh26">
        <p>沪ICP备XXXXXXXXX号&nbsp; | &nbsp;经营证照&nbsp; | &nbsp;互联网药品信息服务资格证(沪)-经营性-2017-0006&nbsp; | &nbsp;违法和不良信息举报电话：XXX-XXXXXXXX&nbsp; | &nbsp;沪B2-XXXXXXX
            <br/>沪公网安备 XXXXXXXXX号&nbsp; | &nbsp;友情链接&nbsp; | &nbsp;出版物经营许可证&nbsp; | &nbsp;增值电信业务经营许可证</p>
        <div class="depart">
            <a href="#"><img src="images/index/depart_01.jpg" alt=""></a>
            <a href="#"><img src="images/index/depart_02.png" alt=""></a>
            <a href="#"><img src="images/index/depart_03.png" alt=""></a>
            <a href="#"><img src="images/index/depart_04.png" alt=""></a>
            <a href="#"><img src="images/index/depart_05.png" alt=""></a>
            <a href="#"><img src="images/index/depart_06.jpg" alt=""></a>
        </div>
    </div>
</footer>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    // 获取二维码图标
    let qrOne = document.querySelector('#tog');
    let qrTwo = document.querySelector('#com');
    // 获取左右按钮
    let choBtn2 = document.querySelector('#btn2');
    // 获取两个登录框
    let signFri = document.querySelector('.sign-first');
    let signSec = document.querySelector('.sign-second');
    let arr1 = [qrOne,choBtn2];
    arr1.forEach( v => {
        v.addEventListener('click',() => {
            signFri.style.display = 'none';
            signSec.style.display = 'block';
        });
    });
    qrTwo.addEventListener('click',() => {
        signSec.style.display = 'none';
        signFri.style.display = 'block';
    });
</script>
</body>
</html>